<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页</title>
</head>
<body>
    <!--错误 login/register/  会在当前页面url后继续补
    正确写法/login/register/  ip:port后开始-->
    <form id="register-form" action="/login/register/" method="post">
        {% csrf_token %}
        用户名：<input id="form-name" type="text" name="name">        <br>
        密&emsp;码：<input type="password" name="password">           <br>
        邮&emsp;箱：<input type="text" name="email">                   <br>
        手&emsp;机：<input type="text" name="phone">
        <button>发送验证码</button>              <br>
        验 证 码: <input type="text" name="yzm"> <br>
        <button type="submit">注册</button>
    </form>
    <br>
    <h3 id="error_message" style="color: red"></h3>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
        // jquery源代码。
        // 1>文件外层被小括号括住，表示浏览器加载完jquery代码后立即执行，这样才不影响后面jquery语法的使用。
        // 2>源码 window.jQuery = window.$ = jQuery;把jquery的方法封装到了全局对象window中。写成window.jQuery('#form-name');window,$('form-name') ; $('#form-name')
        // 3>$('#form-name')    jquery对象初始化、根据参数选择标签，实际上用的还是原生js方法。document.genElementByxxxx()
        // js{}表示函数体或对象。对象 键key不用加引号。
        $(function () {
            $('#form-name').change(function () {
                console.log('触发change事件');
                $.ajax({
                    type:'POST', //请求方式
                    url:'http://127.0.0.1:8000/login/register_check/', //接口
                    data:{'name':$('#form-name').val()},
                    async:true,  //默认异步。这个参数可以不写
                    dataType:'json',   //返回值类型
                    error : function () {
                        //错误回调函数
                        //指的是http请求的成功关系，不是业务逻辑用户名长短是否合格
                    },
                    success:function (resp) {
                        //成功回调
                        console.log(resp)
                        console.log(resp.error_message)
                        error_message = resp.error_message
                        $('#error_message').html(error_message)
                    },
                    complete:function (resp) {
                        //请求完成后执行
{#                        console.log(resp)#}
{#                        resJson = resp.responseTEXT#}
{#                        resp_json_obj =JSON.parse(respText)#}
{#                        resp_json_obj.error_message#}
                    }

                })
            })
        })
    </script>
</body>
</html>